import React, { Component } from 'react'
import { Tabs } from 'antd-mobile';
import "./HotTabBar.scss"
import axios from "axios"
import Star from "./star/Star"
import { withRouter } from "react-router-dom"

const tabs = [
  { title: '套装' },
  { title: '毛衣' },
  { title: '针织衫' },
  { title: '卫衣' },
  { title: '外套' },
  { title: '下装' },
];
class HotTabBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      hotList1: [],
      hotList2: [],
      hotList3: [],
      hotList4: [],
      hotList5: [],
      hotList6: [],
    }
  }

  // 异步请求
  componentDidMount() {
    // 套装
    axios.get("./json/hotList1.json").then((res) => {
      let hotList1_str = res.data;
      let hotList1 = hotList1_str.data[138305].list;
      
      this.setState({ hotList1 });
      
    });

    // 毛衣
    axios.get("./json/hotList1.json").then((res) => {
      let hotList2_str = res.data;
      let hotList2 = hotList2_str.data[139978].list;
      
      this.setState({ hotList2 });
      
    });

    // 针织衫
    axios.get("./json/hotList1.json").then((res) => {
      let hotList3_str = res.data;
      let hotList3 = hotList3_str.data[138305].list;
      
      this.setState({ hotList3 });
      
    });

    // 卫衣
    axios.get("./json/hotList2.json").then((res) => {
      let hotList4_str = res.data;
      let hotList4 = hotList4_str.data[139970].list;
      
      this.setState({ hotList4 });
    });

    // 外套
    axios.get("./json/hotList1.json").then((res) => {
      let hotList5_str = res.data;
      let hotList5 = hotList5_str.data[139969].list;
      
      this.setState({ hotList5 });
    });

    // 下装
    axios.get("./json/hotList2.json").then((res) => {
      let hotList6_str = res.data;
      let hotList6 = hotList6_str.data[138304].list;
      
      this.setState({ hotList6 });
    });
  }

  // 跳转商品详情页面
  goToNewDetail=(id)=>{
    this.props.history.push('/details/'+ "1msvj44")
  }

  render() {
    return (
      <div className="hotTabBar">
        <Tabs tabs={tabs} initialPage={2} animated={false} useOnPan={false} tabBarActiveTextColor="#ff5777">
          <div className="hotContent-flex-box">
            {this.state.hotList1.map((v,i) => {
              return (
                <div className="hot-item" key={v.item_id} onClick={this.goToNewDetail.bind(this,i)}>
                  <div className="itemImage">
                    <img src={v.image} alt=""/>
                  </div>
                  <div className="item-right">
                    <div className="right-top">
                      <p className="item-title">{v.title}</p>
                      <div className="top-heat">
                        <p>今日热度：</p>
                        <div className="heatHeart">
                          <Star star={v.fire*2}></Star>
                        </div>
                      </div>
                    </div>
                    <div className="item-bottom">
                      <div className="bottom-content">
                        <div className="bottom-text">
                          <div className="text">热销价</div>
                        </div>
                        <div className="discountPrice">￥{v.discountPrice}</div>
                        <div className="price">￥{v.price}</div>
                      </div>
                      <div className="buy">
                        <p className="toBuy">立即购买</p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="hotContent-flex-box">
            {this.state.hotList2.map((v,i) => {
              return (
                <div className="hot-item" key={v.item_id} onClick={this.goToNewDetail.bind(this,i)}>
                  <div className="itemImage">
                    <img src={v.image} alt=""/>
                  </div>
                  <div className="item-right">
                    <div className="right-top">
                      <p className="item-title">{v.title}</p>
                      <div className="top-heat">
                        <p>今日热度：</p>
                        <div className="heatHeart">
                          <Star star={v.fire*2}></Star>
                        </div>
                      </div>
                    </div>
                    <div className="item-bottom">
                      <div className="bottom-content">
                        <div className="bottom-text">
                          <div className="text">热销价</div>
                        </div>
                        <div className="discountPrice">￥{v.discountPrice}</div>
                        <div className="price">￥{v.price}</div>
                      </div>
                      <div className="buy">
                        <p className="toBuy">立即购买</p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

         <div className="hotContent-flex-box">
            {this.state.hotList3.map((v,i) => {
              return (
                <div className="hot-item" key={v.item_id} onClick={this.goToNewDetail.bind(this,i)}>
                  <div className="itemImage">
                    <img src={v.image} alt=""/>
                  </div>
                  <div className="item-right">
                    <div className="right-top">
                      <p className="item-title">{v.title}</p>
                      <div className="top-heat">
                        <p>今日热度：</p>
                        <div className="heatHeart">
                          <Star star={v.fire*2}></Star>
                        </div>
                      </div>
                    </div>
                    <div className="item-bottom">
                      <div className="bottom-content">
                        <div className="bottom-text">
                          <div className="text">热销价</div>
                        </div>
                        <div className="discountPrice">￥{v.discountPrice}</div>
                        <div className="price">￥{v.price}</div>
                      </div>
                      <div className="buy">
                        <p className="toBuy">立即购买</p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        
          <div className="hotContent-flex-box">
            {this.state.hotList4.map((v,i) => {
              return (
                <div className="hot-item" key={v.item_id} onClick={this.goToNewDetail.bind(this,i)}>
                  <div className="itemImage">
                    <img src={v.image} alt=""/>
                  </div>
                  <div className="item-right">
                    <div className="right-top">
                      <p className="item-title">{v.title}</p>
                      <div className="top-heat">
                        <p>今日热度：</p>
                        <div className="heatHeart">
                          <Star star={v.fire*2}></Star>
                        </div>
                      </div>
                    </div>
                    <div className="item-bottom">
                      <div className="bottom-content">
                        <div className="bottom-text">
                          <div className="text">热销价</div>
                        </div>
                        <div className="discountPrice">￥{v.discountPrice}</div>
                        <div className="price">￥{v.price}</div>
                      </div>
                      <div className="buy">
                        <p className="toBuy">立即购买</p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

         <div className="hotContent-flex-box">
            {this.state.hotList5.map((v,i) => {
              return (
                <div className="hot-item" key={v.item_id} onClick={this.goToNewDetail.bind(this,i)}>
                  <div className="itemImage">
                    <img src={v.image} alt=""/>
                  </div>
                  <div className="item-right">
                    <div className="right-top">
                      <p className="item-title">{v.title}</p>
                      <div className="top-heat">
                        <p>今日热度：</p>
                        <div className="heatHeart">
                          <Star star={v.fire*2}></Star>
                        </div>
                      </div>
                    </div>
                    <div className="item-bottom">
                      <div className="bottom-content">
                        <div className="bottom-text">
                          <div className="text">热销价</div>
                        </div>
                        <div className="discountPrice">￥{v.discountPrice}</div>
                        <div className="price">￥{v.price}</div>
                      </div>
                      <div className="buy">
                        <p className="toBuy">立即购买</p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          
          <div className="hotContent-flex-box">
            {this.state.hotList6.map((v,i) => {
              return (
                <div className="hot-item" key={v.item_id} onClick={this.goToNewDetail.bind(this,i)}>
                  <div className="itemImage">
                    <img src={v.image} alt=""/>
                  </div>
                  <div className="item-right">
                    <div className="right-top">
                      <p className="item-title">{v.title}</p>
                      <div className="top-heat">
                        <p>今日热度：</p>
                        <div className="heatHeart">
                          <Star star={v.fire*2}></Star>
                        </div>
                      </div>
                    </div>
                    <div className="item-bottom">
                      <div className="bottom-content">
                        <div className="bottom-text">
                          <div className="text">热销价</div>
                        </div>
                        <div className="discountPrice">￥{v.discountPrice}</div>
                        <div className="price">￥{v.price}</div>
                      </div>
                      <div className="buy">
                        <p className="toBuy">立即购买</p>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
      </Tabs>
    </div>
    );
  }
}
export default withRouter(HotTabBar)